<template>
	<view class="app-price-title-share">    
		<text class="app-name">{{name}}</text>
		<view class="app-price-content dir-left-nowrap">
			<view class="app-price">
				<text class="app-price-symbol app-font app-non-member-price" v-if="level_show === 0 || level_show === 2">{{group_price_min}}</text>
				<view  v-else-if="level_show === 1" class="app-level dir-left-nowrap cross-center">
					<text class="app-price-symbol app-font app-member-price">
						{{group_min_member_price}}
					</text>
					<text class="app-icon" style="width: 120upx;line-height: 40upx;height: 40upx;">会员价</text>
                     <app-sup-vip :is_vip_card_user="is_vip_card_user" margin="10rpx 0 0 11rpx" v-if="discount > 0" :discount="discount"></app-sup-vip>
				</view>
				<view class="app-bottom dir-left-wrap cross-center">
					<text class="app-price-symbol app-original-price" v-if="level_show === 1">{{original_price}}</text>
					<text class="app-pt-info" v-for="(item, index) in pintuan_groups" :key="index">{{item.people_num}}人拼团</text>
					<text class="app-pt-info">拼团立省￥{{groupSparePrice}}</text>
				</view>
			</view>
			<view class="app-share" style="width: 60upx;">
				<app-form-id @click="shareShow = true">
					<image class="app-icon" src="../../../static/image/icon/icon-share.png"></image>
					<text class="app-text">分享</text>
				</app-form-id>
			</view>
			<view>
				<app-share-qr-code v-model="shareShow" :url="url"></app-share-qr-code>
			</view>
		</view>
	</view>
</template>

<script>
	import appShareQrCode from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
    import appSupVip from "../../../components/page-component/app-sup-vip/app-sup-vip.vue";
	
    export default {
        name: 'app-price-title-share',
	    data() {
            return {
                shareShow: false,
            }
	    },
	    props: {
            is_vip_card_user:  {
                type: Number,
                default() {
                    return 0;
                }
            },
            discount: {
                type: String,
                default() {
                    return null;
                }
            },
            name: {
                type: String,
	            default() {
                    return '';
	            }
            },
            level_show: {
                type: Number,
	            default() {
                    return 0;
	            }
            },
            original_price: {
                type: String,
	            default() {
                    return '0.00';
	            }
            },
            group_min_member_price: {
                type: [String,Number],
	            default() {
                    return '0.00';
	            }
            },
            group_price_min: {
                type: String,
	            default() {
                    return '0.00';
	            }
            },
            group_num: {
                type: Number,
	            default() {
                    return 0;
                }
            },
		    url: {
                type: String,
			    default() {
                    return '';
			    }
		    },
            pintuan_groups: {
                type: Array,
	            default() {
                    return [];
	            }
            }
	    },
	    computed: {
            groupSparePrice: function() {
                return (this.original_price - this.group_price_min).toFixed(2)
            }
	    },
	    components: {
            'app-share-qr-code': appShareQrCode,
            'app-sup-vip': appSupVip,
	    }
    }
</script>

<style scoped lang="scss">
	.vip-price {
		width: #{148upx};
		height: #{27upx};
		margin-left: #{13rpx};
		margin-bottom: #{10rpx};
		.item {
			height: #{27upx};
			width: 50%;
		}
		.left {
			border-top-left-radius: #{13upx};
			border-bottom-left-radius: #{13upx};
			background-color: #4e4040;
			position: relative;
		}
		.right {
			border-top-right-radius: #{13upx};
			border-bottom-right-radius: #{13upx};
			background: linear-gradient(45deg, #edc9a8, #fdebde);
			font-size: #{18upx};
			line-height: #{27upx};
			text-align: center;
			color: #4e4040;
		}
		.vip-icon {
			width: #{51upx};
			height: #{14upx};
			position:absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
	.app-price-title-share {
		background-color: white;
		padding: #{30rpx} #{26rpx} #{10rpx} #{26rpx};
		width: #{750rpx};
		.app-name {
			font-size: #{32rpx};
			width: #{698rpx};
			height: #{73rpx};
			line-height: #{35rpx};
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.app-price-content {
			width: #{698rpx};
			/* #ifndef MP-TOUTIAO */
			height: #{130rpx};
			/* #endif */
			/* #ifdef MP-TOUTIAO */
			height: #{100rpx};
			/* #endif */
			padding-top: #{20rpx};
			.app-price {
				min-height: #{136rpx};
				width: #{698-40rpx};
				.app-bottom {
					margin-top: #{18rpx};
					.app-original-price {
						font-size: #{23rpx};
						color: #ff4544;
						margin-right: #{10rpx};
					}
					.app-pt-info {
						display: inline-block;
						height: #{30rpx};
						line-height: #{30rpx};
						padding: 0 #{8rpx};
						margin-left: #{5rpx};
						background-color: #feeeee;
						color: #ff5c5c;
						font-size: #{20rpx};
					}
				}
				.app-price-symbol:before {
					content: '￥';
					font-size: #{20rpx};
				}
				.app-font {
					font-size: #{40rpx};
					font-weight: bold;
				}
				.app-non-member-price {
					color: #ff5c5c;
				}
				.app-member-price {
					color: #f39800;
				}
				.app-icon {
					display: inline-block;
					height: #{27rpx};
					line-height: #{25rpx};
					width: #{65rpx};
					font-size: #{17rpx};
					text-align: center;
					color: #f4a421;
					background-color: #fef4e5;
					border-radius: #{6rpx};
					border: #{1rpx} solid #f5aa2d;
					margin-left: #{11rpx};
					margin-top: #{10rpx};
				}
			}
			.app-share {
				width: #{40rpx};
				height: #{136rpx};
				position: relative;
				.app-icon {
					width: #{40rpx};
					height: #{40rpx};
				}
				.app-text {
					color: #666666;
					font-size: #{20rpx};
					position: absolute;
					top: #{50rpx};
					left: 0;
				}
			}
		}
	}
</style>